body,
html {
	height: 100%;
}
body {
	display: flex;
	flex-direction: column;
}
a {
	text-decoration: none;
}
main {
	flex-grow: 1;
	overflow: auto;
	padding: 0px 10px;
	box-sizing: border-box;
	span {
		display: block;
	}

	//第二部分
	#main-two {
		h2 {
			font-size: 18px;
			line-height: 50px;
		}
		a {
			text-decoration: none;
			display: block;
			color: #444;
			width: 100%;
			box-shadow: 0px 0px 2px 2px #e8e8e8;
			border-radius: 20px;
			overflow: hidden;
			img {
				width: 100%;
			}

			strong {
				margin-left: 20px;
				font-size: 16px;
				line-height: 30px;
			}

			span {
				margin-left: 20px;
				margin-bottom: 20px;
				//多行超出隐藏
				text-overflow: ellipsis;
				-webkit-line-clamp: 1;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}
		}
	}

	//第三部分
	#main-there {
		h2 {
			font-size: 18px;
			line-height: 50px;
		}
		ul {
			width: 100%;
			margin-bottom: 20px;
			color: #fff;
			li {
				position: relative;
				height: 150px;
				overflow: hidden;
				box-shadow: 0px 0px 2px 2px #e8e8e8;
				border-radius: 20px;
				margin-bottom: 20px;
				a {
					text-decoration: none;
					color: #fff;
				}

				img {
					width: 100%;
				}
				strong {
					position: absolute;
					bottom: 50px;
					left: 20px;
					font-size: 18px;
					line-height: 60px;
				}
				span {
					position: absolute;
					bottom: 30px;
					left: 20px;
					//多行超出隐藏
					text-overflow: ellipsis;
					-webkit-line-clamp: 1;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					overflow: hidden;
				}
			}
		}
	}
}
